<template>
  <div id="map"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import { app } from '@/main'
/* 1、设置一个瓦片图层 --底图 */
const gaode_vector = new ol.layer.Tile({
  title: '矢量',
  source: new ol.source.XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
    wrapX: false,
    crossOrigin: 'Anonymous',
  }),
})
var gaode_image = new ol.layer.Tile({
  title: '影像',
  source: new ol.source.XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
    wrapX: false,
    crossOrigin: 'Anonymous',
  }),
  // opacity: 0.4
})

onMounted(() => {
  const map = new ol.Map({
    target: 'map',
    layers: [gaode_vector],
    view: new ol.View({
      center: [114.37265396118164, 30.492296218872074],
      zoom: 13,
      projection: 'EPSG:4326',
    }),
    interactions: ol.interaction.defaults({
      doubleClickZoom: false,
    }),
  })
  /* 2、地图全局变量的设置 */
  app.config.globalProperties.$map = map
})
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>
